import React, { Component } from 'react'
import { Button, Card, Table, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons'
import {Panel} from '../../../components'
import ModalForm from './ModalForms'
import { connect } from 'react-redux'

 export default class index extends Component {
    
    constructor(props){
        super(props)
        this.state={
            dataSource:null,
            visible:false,
            name:'阿里云'
        }
    }

    onAdd=()=>{
        //打开弹窗
        this.setState({
            visible:true
        })
        // this.props.dispatch({
        //     type:'showModalForm',
        //     data:{
        //         title:'新增',
        //         data:{
                    
        //         }
        //     }
        // })
    }

    

    
    getTableProps = () => {
        return {
            columns: [
                {
                    title: '菜单',
                    dataIndex: 'name'
                },
                {
                    title: '访问地址',
                    dataIndex: 'linkUrl'
                },
                {
                    title: '操作',
                    render: (record) => (
                        <Space>
                            <a>查看</a>
                            <a>编辑</a>
                            <a>删除</a>
                            <a>新增</a>
                        </Space>  
                    )
                }
            ],
            dataSource: this.state.dataSource || [],
            rowKey: 'id',
            pagination:false
        }
    }


  render() {
    return (
      <div>
          <Panel title="志愿者管理">
              <div className='m-operate'>
                  <Button type='primary' icon={<PlusOutlined />} onClick={this.onAdd}>新增</Button>
              </div>
              <Card>
                  <Table {...this.getTableProps()}></Table>
                  {this.state.visible&&<ModalForm  {...this.props}/>}
              </Card>
          </Panel>
      </div>
    )
  }
}




